<!--
 * @Date: 2023-10-17 17:35:40
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-02-22 17:11:50
 * @FilePath: \ztc-web\src\views\research\index.vue
-->

<template>
  <div style="padding: 10px 20px">
    <d-table-search
      :columns="columns"
      :request="handleRequest"
      title="分析研判"
      :header-cell-style="{
        background: '#f5f7fa',
      }"
      :pagination="{
        background: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        small: 'small',
        pageSizes: [10, 200, 300, 400],
      }"
      :hasSearch="true"
      :has-page="true"
      border
      ref="tableRef"
      @handleReset="handleReset"
      :handleFilterChange="filterChanged"
    >
      <template #searchData="{ search }">
        <el-space style="margin-right: 10px">
          <el-radio-group @change="handleChange" v-model="form.eventState">
            <el-radio-button :label="0">待办事件</el-radio-button>
            <el-radio-button :label="1">已办事件</el-radio-button>
            <el-radio-button label="">全部事件</el-radio-button>
          </el-radio-group>
          <el-radio-group
            :disabled="form.eventState === 0 || form.eventState === 1"
            v-model="form.eventAreaType"
            @change="handleChangeType"
            v-show="!isAdmin"
          >
            <el-radio :label="1">本区事件</el-radio>
            <el-radio :label="2"> 本区转出</el-radio>
            <el-radio :label="3"> 外区转入</el-radio>
            <el-radio :label="4">基层退回</el-radio>
          </el-radio-group>
          <el-radio-group
            v-model="form.eventAreaType"
            @change="handleChangeType"
            v-show="!(form.eventState === 0 || form.eventState === 1)&&isAdmin"
          >
            <el-radio :label="2"> 跨区事件</el-radio>
          </el-radio-group>
          
        </el-space>
        <el-space>
          <el-form-item prop="eventNo" label="事件编号">
            <el-input placeholder="请输入事件编号" v-model="search.eventNo" />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="eventPlateno" label="车牌号">
            <el-input
              placeholder="请输入车牌号"
              v-model="search.eventPlateno"
            />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item label="时间" prop="time">
            <el-date-picker
              v-model="form.time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-space>
      </template>

      <template #eventYpState="data">
        <div>
          <el-tag v-if="data.data.eventYpState === 0" type="warning">{{
            get_event_yp_state(data.data.eventYpState)
          }}</el-tag>
          <el-tag v-if="data.data.eventYpState === 1" type="success">{{
            get_event_yp_state(data.data.eventYpState)
          }}</el-tag>
        </div>
      </template>
      <template #eventYpResult="data">
        <div>
          <el-tag
            effect="plain"
            v-if="data.data.eventYpResult === 0"
            type="warning"
            >{{ get_event_yp_result(data.data.eventYpResult) }}</el-tag
          >
          <el-tag
            effect="plain"
            v-if="data.data.eventYpResult === 1"
            type="error"
            >{{ get_event_yp_result(data.data.eventYpResult) }}</el-tag
          >
          <el-tag
            effect="plain"
            v-if="data.data.eventYpResult === 2"
            type="success"
            >{{ get_event_yp_result(data.data.eventYpResult) }}</el-tag
          >
        </div>
      </template>

      <template #eventCzState="data">
        <div>
          <el-tag v-if="data.data.eventCzState === 0" type="warning">{{
            get_event_cz_state(data.data.eventCzState)
          }}</el-tag>
          <el-tag v-if="data.data.eventCzState === 1" type="danger">{{
            get_event_cz_state(data.data.eventCzState)
          }}</el-tag>
          <el-tag v-if="data.data.eventCzState === 2" type="success">{{
            get_event_cz_state(data.data.eventCzState)
          }}</el-tag>
        </div>
      </template>
      <template #eventTaskState="data">
        <div>
          {{
            data.data.eventTaskState === 3
              ? "再审核"
              : data.data.eventTaskState === 4
              ? "审核完成"
              : ""
          }}
        </div>
      </template>

      <template #action="data">
        <el-button
          v-if="
            data.data.isShowYpButton===1&&form.eventState===0
          "
          size="small"
          type="primary"
          @click="handleRearch(data.data)"
          >{{ userStore.admin?"转派":"研判" }}
        </el-button>
        <el-button size="small" type="warning" @click="handleClick(data.data)"
          >查看</el-button
        >
      </template>
    </d-table-search>
  </div>
</template>

<script setup>
import DTableSearch from "@/components/Table/tableList.vue";
import {
  getEventListByEventAreaType,
  getEventListByState,
} from "@/api/research/index";
import { onMounted, reactive } from "vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

const tableRef = ref();

import { useRouter } from "vue-router";
const router = useRouter();
const isAdmin = userStore.admin




const obj = {};
const filterChanged = (value) => {
  console.log(value);
  for (let k in value) {
    obj[k] = value[k][0];
  }

  tableRef.value.handleSearch(obj);
};



const columns = [
  { type: "index",
    fixed: "left",
    width: 55, label: "序号" },
  {
    prop: "eventPlateno",

    label: "车牌号",
    width: 126,
  },
  {
    prop: "eventNo",
    label: "编号",
    width: 146,
  },
  {
    prop: "typeName",
    label: "事件类型",
    width: 100,
    filters: [
      { text: "冒装", value: "1" },
      { text: "GPS离线行驶", value: "5" },
      { text: "三证不全", value: "7" },
    ],
    columnKey: "eventTypeid",
    filterMultiple: false,
  },

  {
    prop: "eventAreaname",
    label: "抓拍区县",
    width: 126,
  },

  {
    prop: "eventCreateTime",
    label: "发生时间",
    width: 162,
  },
  {
    prop: "deviceName",
    label: "卡口信息",
    minWidth: 146,
  },

  {
    prop: "transferSource",
    label: "转派来源",
    width: 126,
  },
  {
    prop: "sutra",
    label: "经派",
    width: 126,
  },
  {
    prop: "transferTarget",
    label: "转派目标",
    width: 146,
  },
  {
    prop: "eventYpState",
    label: "研判状态",
    slotName: "eventYpState",
    width: 100,
    filters: [
      { text: "已判定", value: "1" },
      { text: "待判定", value: "0" },
    ],
    columnKey: "eventYpState",
    filterMultiple: false,
  },
  {
    prop: "eventYpResult",
    label: "研判结果",
    slotName: "eventYpResult",
    filters: [
      { text: "--", value: "0" },
      { text: "无效事件", value: "1" },
      { text: "有效事件", value: "2" },
    ],
    columnKey: "eventYpResult",
    filterMultiple: false,
    width: 100,
  },
  {
    prop: "eventTaskState",
    label: "市审核",
    slotName: "eventTaskState",
    width: 100,
  },
  {
    prop: "eventCzState",
    label: "处置状态",
    filters: [
      { text: "--", value: "0" },
      { text: "未结案", value: "1" },
      { text: "已结案", value: "2" },
    ],
    columnKey: "eventCzState",
    filterMultiple: false,
    slotName: "eventCzState",
    width: 100,
  },

  {
    prop: "操作",
    label: "操作",
    slotName: "action",
    width: 166,
    fixed: "right",
  },
];

const form = reactive({
  eventState: 0,
  eventAreaType: "",
  time: "",
});
onMounted(() => {});

const handleRequest = (params, done) => {
  console.log(params);
  if (form.time) {
    params.beginTime = form.time[0] + "";
    params.endTime = form.time[1] + "";
  }
  if (form.eventState === 0 || form.eventState === 1) {
    form.eventAreaType = "";
    getEventListByState({
      ...params,
      eventState: form.eventState,
      eventAreaType: form.eventAreaType,
    }).then((res) => {
      done({ data: res.rows, total: res.total });
    });
  } else {
    getEventListByEventAreaType({
      ...params,
      eventAreaType: form.eventAreaType,
    }).then((res) => {
      done({ data: res.rows, total: res.total });
    });
  }
};
const handleChange = (data) => {
  tableRef.value.handleSearch();
};
const handleChangeType = (data) => {
  tableRef.value.handleSearch();
};

const handleReset = () => {
  form.eventAreaType = "";
  form.eventState = 0;
  form.time = "";
  form.eventYpState=""
  form.eventYpResult=""
  form.eventTypeid=""
  tableRef.value.handleResetFilter();
};
const { proxy } = getCurrentInstance();
const { event_yp_state, event_yp_result, event_cz_state } = proxy.useDict(
  "event_yp_state", //研判状态
  "event_yp_result",
  "event_cz_state"
);

const handleRearch = (data) => {
  router.push({
    path: "/researchMessage",
    query: {
      eventId: data.eventid,
      eventNo: data.eventNo,
      show: "1",

    },
  });
};
const handleClick = (data) => {
  router.push({
    path: "/researchMessage",
    query: {
      eventId: data.eventid,
      eventNo: data.eventNo,
      show: "0",
    },
  });
};
const get_event_yp_state = (type) => {
  if(event_yp_state.value.length===0) return
  return event_yp_state.value.find((item) => item.value === type + "").label;
};
const get_event_yp_result = (type) => {
  if(event_yp_result.value.length===0) return

  return event_yp_result.value.find((item) => item.value === type + "").label;
};
const get_event_cz_state = (type) => {
  if(event_cz_state.value.length===0) return

  return event_cz_state.value.find((item) => item.value === type + "").label;
};
</script>

<style lang="scss" scoped>
::v-deep .el-form .el-form-item__label {
  font-weight: 500;
}
</style>
